<template>
  <div ref="lyricWrap" :style="{ height: height }" :class="[bgImageClass, 'play-lyric']" aria-label="歌词">
    <div
      ref="lyricItemRef"
      :class="[index == i ? 'active' : '']"
      :style="{ fontWeight: index == i ? 'bolder' : 'normal', textAlign: textAlign, ...textStyle }"
      v-for="(text, i) in lyricSort"
      :key="i"
    >
      <span :style="`--color:${textStyle.color}`">{{ text }}</span>
    </div>
  </div>
</template>
<script>
import { mapGetters } from "vuex";

export default {
  name: "JcAutoPlayLYric",
  props: {
    height: {
      type: String,
      default: "190px",
    },
    bgImageClass: {
      type: String,
      default: "bgjb",
    },
    zhutiTitleStyle: {
      type: Object,
      default: () => ({
        fontSize: "1.5rem",
        color: "#fff",
      }),
    },
    textShadow: {
      type: Number,
      default: 0,
    },
    textStyle: {
      type: Object,
      default: () => ({
        fontSize: "1rem",
        color: "#fff",
      }),
    },

    textAlign: {
      type: String,
      default: "center",
    },
    currentLyric: {
      type: Object,
      default: null,
    },
    clyric: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {};
  },
  computed: {
    lyricSort() {
      if (this.clyric != null) {
        const a = [...this.clyric.lyrics];
        return a.sort((a, b) => a.timestamp - b.timestamp).map((item) => item.content);
      }
      return [];
    },
    index() {
      return this.currentLyric != null ? this.currentLyric.index : 0;
    },
  },
  mounted() {
    try {
      this.audio.removeEventListener("ended", this.ended.bind(this));
      this.audio.addEventListener("ended", this.ended.bind(this));
    } catch (err) {}
  },
  destroyed() {
    this.audio.removeEventListener("ended", this.ended.bind(this));
  },
  methods: {
    init() {},
    ended() {
      this.$refs.lyricWrap.scrollTop = 0;
    },
  },
  watch: {
    currentLyric() {
      try {
        if (this.$refs.lyricItemRef && this.$refs.lyricItemRef[this.currentLyric.index]) {
          this.$refs.lyricItemRef[this.currentLyric.index].scrollIntoView({ block: "center", behavior: "smooth" });
        }
      } catch (err) {
        console.log("第93行-->", err);
      }
    },
  },
};
</script>
<style scoped>
.play-lyric {
  width: 100%;
  margin: 0px;
  overflow: auto;
  padding: 0px;
  position: relative;
}
.active {
  position: relative;
}
.active span {
  border-bottom: 3px solid var(--color);
  border-top: 3px solid var(--color);
}
</style>
